import React from 'react';
import { ProductGroupTreeC, PrimaryC, FirstHeaderC, SecondHeaderC } from '@/comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';

class ProductGroupTreeDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      init2: undefined,
      init4: undefined,
    };

    setTimeout(() => {
      this.setState({
        init2: 'd7c274c85de94e09bd8086224ed52c62',
        init4: ['d7c274c85de94e09bd8086224ed52c62', '32968ab57a71458992b6a59c28b75ded'],
      });
    }, 3000);
  }
  onClick1 = () => {
    this.state.ProductGroupTreeC1.setSelect('15b66ea2ce2f4123a2f2c7554632920b');
  };
  onClick2 = () => {
    this.state.ProductGroupTreeC2.setSelect('15b66ea2ce2f4123a2f2c7554632920b');
  };
  onClick3 = () => {
    this.state.ProductGroupTreeC3.setSelect(['e307e5965ad449eb876d15f31df3240f']);
  };
  onClick4 = () => {
    this.state.ProductGroupTreeC4.setSelect(['e307e5965ad449eb876d15f31df3240f', '15b66ea2ce2f4123a2f2c7554632920b']);
  };
  render() {
    return (
      <div style={{ padding: '20px', width: '500px' }}>
        <FirstHeaderC title='单选模式' />
        <SecondHeaderC title='1.同步初始化' />
        <ProductGroupTreeC
          form={this.props.form}
          dataIndex='productId1'
          multiple={false}
          onRef={(ref) => this.setState({ ProductGroupTreeC1: ref })}
          initialValue={'d7c274c85de94e09bd8086224ed52c62'}
          onChange={(e) => console.log(e)}
        />
        <PrimaryC onClick={this.onClick1} title='更改数据' />
        <SecondHeaderC title='2.异步初始化' />
        <ProductGroupTreeC
          form={this.props.form}
          dataIndex='productId2'
          multiple={false}
          onRef={(ref) => this.setState({ ProductGroupTreeC2: ref })}
          initialValue={this.state.init2}
          onChange={(e) => console.log(e)}
        />
        <PrimaryC onClick={this.onClick2} title='更改数据' />

        <FirstHeaderC title='多选模式' />
        <SecondHeaderC title='3.同步初始化' />
        <ProductGroupTreeC
          form={this.props.form}
          dataIndex='productId3'
          onRef={(ref) => this.setState({ ProductGroupTreeC3: ref })}
          initialValue={['d7c274c85de94e09bd8086224ed52c62', '32968ab57a71458992b6a59c28b75ded']}
          onChange={(e) => console.log(e)}
        />
        <PrimaryC onClick={this.onClick3} title='更改数据' />
        <SecondHeaderC title='4.异步初始化' />
        <ProductGroupTreeC
          form={this.props.form}
          dataIndex='productId4'
          onRef={(ref) => this.setState({ ProductGroupTreeC4: ref })}
          initialValue={this.state.init4}
          onChange={(e) => console.log(e)}
        />
        <PrimaryC onClick={this.onClick4} title='更改数据' />

        <FirstHeaderC title='其他设置' />
        <SecondHeaderC title='5.设置rules、helper、权限、layout' />
        <ProductGroupTreeC
          form={this.props.form}
          dataIndex='productId5'
          rules={[{ required: true, message: '请选择组合!' }]}
          helper='lalal'
          authority={'write'}
          allowClear={true}
          formItemLayout={{
            labelCol: {
              span: 8,
              offset: 2,
            },
            wrapperCol: {
              span: 12,
              offset: 2,
            },
          }}
        />
        <SecondHeaderC title='6.显示checkbox' />
        <ProductGroupTreeC form={this.props.form} dataIndex='productId6' helper='lalal' onChange={(e) => console.log(e)} treeCheckable={true} />

        <SecondHeaderC title='7 产品-组合树形结构' />
        <ProductGroupTreeC
          form={this.props.form}
          dataIndex='productId7'
          multiple={true}
          onRef={(ref) => this.setState({ ProductGroupTreeC7: ref })}
          investmentType={'FB'}
          onChange={(e) => console.log(e)}
        />
        <SecondHeaderC title='8 产品-组合树形结构 设置交易模式' />
        <ProductGroupTreeC
          form={this.props.form}
          dataIndex='productId7'
          multiple={true}
          onRef={(ref) => this.setState({ ProductGroupTreeC7: ref })}
          investmentType={'FB'}
          onChange={(e) => console.log(e)}
          tradeModel={['BOOKKEEPING_MODE', 'COMMAND_MODE', 'VALUATION_BOOKKEEPING_MODEL']}
        />
      </div>
    );
  }
}

export default Form.create()(ProductGroupTreeDemo);
